<template>
    <div>
        <div class="tuijian-box" v-if="isload">
        <div class="banner">
            <ul v-bind:style="{width:100*banner_list.length+'%'}">
                <li v-for="item in banner_list" v-bind:key="item.i">
                    <a href="javascript">
                        <img v-bind:src="item.i" alt="">
                    </a>
                </li>
            </ul>
        </div>

        <div class="tuijian-main" v-if="food_list">
            <ul>
                <li v-for="item in food_list" v-bind:key="item.r.id">
                    <div class="tuijian-user-data-box">
                        <div class="img-box" >
                            <img v-bind:src="item.r.a.p" alt="">
                        </div>
                        <div class="user-name">{{item.r.a.n}}</div>
                        <div class="user-lv">lv{{item.r.a.lvl}}</div>
                    </div>
                    <div class="tuijian-food-box" v-on:click="turnTo(item.r.id)">
                        <img v-bind:src="item.r.img" alt="">
                    </div>
                    <div class="tuijian-food-data-box">
                        <div class="tuijian-icon-box">
                            <div class="icon-box-left">
                                <i class="iconfont icon-liulan"></i>
                                <div class="count-view">{{item.r.vc}}浏览</div>
                            </div>
                            <div class="icon-box-right">
                                <i class="iconfont icon-shoucang"></i>
                            </div>
                        </div>
                        <div class="tuijian-food-name">{{item.r.n}}</div>
                        <div class="tuijian-food-activity"></div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <div v-else>
        <jia-zai></jia-zai>
    </div>
    </div>
</template>

<script>
import jiaZai from '@/components/jiazai.vue'
export default {
    components:{
        jiaZai
    },
    data(){
        return {
            banner_list:[],
            tuijian_list:[],
            food_list:[],
            isload:false
        }
    },
    methods:{
        getdata(){
            let datas = JSON.parse(localStorage.getItem("tuijian_list"));
            if(datas){
                this.tuijian_list = datas;
                this.banner_list = datas.banner;
                // this.food_list = datas.list;
                datas.list.forEach((item) => {
                    let obj = {};
                    if(item.type == 1){
                        obj.r = item.r;
                        this.food_list.push(obj);
                    }
                })
                // console.log(this.tuijian_list);
                // console.log(this.food_list);
                this.isload = true
            }else{
                let url = `https://apis.netstart.cn/douguo/home/recommended/0/20`
                let promise = axios.get(url);
                let _this = this;
                promise.then(
                    (res) =>{
                        // console.log(res.data.result);
                        _this.tuijian_list = res.data.result;
                        _this.banner_list = res.data.result.banner;
                        // _this.food_list = res.data.result.list;
                        res.data.result.list.forEach((item)=>{
                            let obj = {};
                            if(item.type == 1){
                                obj.r = item.r;
                                _this.food_list.push(obj);
                            }
                        })
                        localStorage.setItem("tuijian_list",JSON.stringify(res.data.result))
                        this.isload =true;
                    }
                )
            }
        },
        turnTo(i){
            this.$router.push({path:'/detail',query:{id:i}});
        }
    },
    created(){
        this.getdata();
        window.scrollTo(0,0)
    },
    mounted(){

    }
}
</script>

<style lang="scss">
body{
    margin: 0;
}

.tuijian-box{
    width: 100%;
    .banner{
         width: 100%;
         height: 100px;
         position: relative;
         overflow-x: scroll;
         ul{
             margin: 0;
             padding: 0;
             list-style: none;
             height: 100px;
             display: flex;
             transition: margin-left 2s;
            //  animation: donghua 10s linear infinite;
             li{
                 height: 100px;
                 width: 100%;
                 a{
                     width: 100px;
                     img{
                         margin: 0;
                         padding: 0;
                         width: 100%;
                     }
                 }
             }
         }
         ol{
             position: absolute;
             height: 10px;
         }
    }

    .tuijian-main{
        width: 100%;
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            margin-bottom: 55px;
            li{
                margin-bottom: 5px;
                .tuijian-user-data-box{
                    width: 100%;
                    display: flex;
                    padding: 0 10px;
                    height: 30px;
                    box-sizing: border-box;
                    // margin-bottom: 5px;
                    margin: 5px 0;
                    .img-box{
                        height: 30px;
                        font-size: 0;
                        margin-right: 3px;
                        img{
                            margin: 0;
                            padding: 0;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                        }
                    }
                    .user-name{
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                    }
                    .user-lv{
                        
                        height: 30px;
                        font-size: 12px;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                }

                .tuijian-food-box{
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
                .tuijian-food-data-box{
                    width: 100%;
                    padding: 0 10px;
                    box-sizing: border-box;
                    .tuijian-icon-box{
                        width: 100%;
                        height: 30px;
                        display: flex;
                        justify-content: start;
                        .icon-box-left{
                            width: 50%;
                            height: 30px;
                            line-height: 30px;
                            font-size: 14px;
                            display: flex;
                            justify-content: start;
                            i{
                                height: 30px;
                                display: inline-block;
                                font-size: 20px;
                                line-height: 30px;
                                margin-right: 5px;
                            }
                            .count-view{
                                height: 30px;
                            line-height: 30px;
                            font-size: 14px;
                            }
                        }
                        .icon-box-right{
                            width: 50%;
                            height: 30px;
                            text-align: right;
                            line-height: 30px;
                            i{
                                display: inline-block;
                                height: 30px;
                                font-size: 20px;
                                line-height: 30px;
                            }
                        }
                    }
                    .tuijian-food-name{
                        // height: 30px;
                        font-size: 16px;
                        font-weight: 600;
                        // line-height: 30px;
                    }
                    .tuijian-food-activity{

                    }
                }
            }
        }
    }
}

@keyframes donghua {
    from{
        margin-left: 0;
    }to{
        margin-left: -500%;
    }
    
}
</style>